import React, { useState }   from "react";
import { appWindow } from "@tauri-apps/api/window";
import IconLeft from "../../assets/IconParkOutlineExpandLeft.svg"
import IconRight from "../../assets/IconParkOutlineExpandRight.svg"
import MdiClose from "../../assets/MdiClose.svg"
import ClarityWindowRestoreLine from "../../assets/ClarityWindowRestoreLine.svg"
import FlowbiteMinimizeSolid from "../../assets/FlowbiteMinimizeSolid.svg"


interface TitleBarProps {
  side:(bool:boolean) => void;
  title?:string;
}
const TitleBar: React.FC<TitleBarProps> =  ({side,title}) => {
  const [isShow, setIsShow] =  useState(false);
  const hdle = (bool:boolean)=>{ 
    setIsShow(bool)
    side(isShow)
  }
  return (
    <div   className="titlebar  p-2 rounded-tl-lg rounded-tr-lg flex"  >
         <div className="h-9 " > {title}   </div>
      <div data-tauri-drag-region className="flex-1 h-9 "></div>
     <div className="h-9  flex justify-end  items-center" >
     <div onClick={()=>hdle(!isShow)}>
              {
                isShow?  <img className="w-4 h-4 cursor-pointer" src={IconLeft} alt="My SVG" /> : <img className="w-4 h-4 cursor-pointer" src={IconRight} alt="My SVG" />
              }
               
    </div>

     <div
        className="titlebar-button cursor-pointer flex items-center"
        onClick={() => appWindow.minimize()}
        style={{ width: "30px", height: "30px", margin: "0 5px" }}
      >
        <img
          src={ FlowbiteMinimizeSolid }
          alt="minimize"
          style={{ width: "16px", height: "16px" }}
        />
      </div>
      <div
        className="titlebar-button cursor-pointer flex items-center"
        onClick={() => appWindow.toggleMaximize()}
        style={{ width: "30px", height: "30px", margin: "0 5px" }}
      >
        <img
          src={ClarityWindowRestoreLine}
          alt="maximize"
          style={{ width: "16px", height: "16px" }}
        />
      </div>
      <div
        className="titlebar-button cursor-pointer flex items-center"
        onClick={() => appWindow.close()}
        style={{ width: "30px", height: "30px", margin: "0 5px" }}
      >
        <img
          src={MdiClose}
          alt="close"
          style={{ width: "16px", height: "16px" }}
        />
      </div>
     </div>
    </div>
  );
};

export default TitleBar; 